<template>
	<view class="symbol" :class="{ boy: sexIndex == 1, girl: sexIndex == 2 }">
		<image class="symbol-sex" src="@/static/images/icon/icon-female.png" mode="aspectFit" v-if="sexIndex == 1"></image>
		<image class="symbol-sex" src="@/static/images/icon/icon-female.png" mode="aspectFit" v-if="sexIndex == 2"></image>
		<view class="symbol-age">{{ ageText }}</view>
	</view>
	<!-- <view class="symbol">{{sexIndex}}</view> -->
</template>

<script>
import moment from '@/utils/Moment.js';
export default {
	props: {
		isMine: {
			default: true,
			type: Boolean
		},
		sex: {
			default: null
		},
		birthday: {
			default: '0000-00-00',
			type: String
		},
		age:{
			default: 0,
			type: Number
		}
	},
	computed: {
		sexIndex: function() {
			let sex = this.sex;
			if (this.isMine && this.userToken) {
				sex = this.userInfo.gender;
			}
			return Number(this.sexEnum.indexOf(sex)) + 1;
		},
		ageText: function() {
			let age = this.age;
			if (this.isMine && this.userToken) {
				age = this.userInfo.birth_age || this.userInfo.idcard_age;
			}
			if (age > 0) {
				return age;
			}
			return '未知';
		}
	},
	data() {
		return {
			sexEnum: ['男', '女']
		};
	}
};
</script>

<style lang="scss">
.symbol {
	height: 28rpx;
	background: rgba(151, 151, 151, 1);
	border-radius: 9rpx;
	padding: 4rpx 9rpx 4rpx 4rpx;
	display: inline-flex;
	align-items: flex-end;
	&.boy {
		background: linear-gradient(180deg, #0060a7 0%, #0060a7 100%) !important;
	}
	&.girl {
		background: linear-gradient(180deg, #ed4f5d 0%, #fb7a8e 100%) !important;
	}
	.symbol-sex {
		height: 20rpx;
		width: 20rpx;
		margin-right: 2rpx;
	}
	.symbol-age {
		font-size: 18rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 24rpx;
		height: 20rpx;
	}
}
</style>
